<template>
  <div class="w-full p-2 bg-white">
    <h1 class="w-full flex justify-between items-center my-2 px-3 h-10 ">
      <span class="text-2xl leading-10 font-semibold w-1/4">{{ nian + " " + hanziyue + "月" }}</span>
      <n-button-group>
        <n-button @click="gaimonth(-1)" round>
          <span>{{"<"}}</span>
          <span>{{"<"}}</span>
          <span>上个月</span>
        </n-button>
        <n-button @click="gaimonth(1)" round>
          <span>下个月</span>
          <span>{{">"}}</span>
          <span>{{">"}}</span>
        </n-button>
      </n-button-group>
      <div class="w-1/4 flex justify-end items-center">
        <n-button @click="getnianyueri()" type="primary" >回到今天</n-button>
      </div>
    </h1>
    <div class="w-full flex flex-wrap justify-start items-start">
      <div class="w-1/7 min-w-100px  h-200px border border-gray-300 cursor-pointer" v-for="item in daylist" :key="item.timestamp" :class="item.month!==yue?'text-gray-400':''" @click="clickevent(item)">
        <div class="w-full h-5 flex justify-between items-center p-1">
          <span>{{item.day}}</span>
          <span v-if="item.day===xianzaitime.ri && item.month===xianzaitime.yue && item.year===xianzaitime.nian" class="text-white bg-red-500 rounded">今天</span>
          <span>{{item.zhou}}</span>
        </div>
        <slot :year="item.year" :month="item.month" :day="item.day" :week="item.week" :timestamp='item.timestamp'></slot>
      </div>
    </div>
  </div>
</template>

<script setup name='rili' lang='ts'>
import {computed, ref,defineEmits} from "vue";
import {NButton,NButtonGroup} from "naive-ui"
const emit = defineEmits(["handleclick","changemonth"])

const dict1:any = {
  "0": "零",
  "1": "壹",
  "2": "贰",
  "3": "弎",
  "4": "肆",
  "5": "伍",
  "6": "陆",
  "7": "柒",
  "8": "捌",
  "9": "玖",
  "10": "拾",
  "11": "拾壹",
  "12": "拾贰",
}
const dict2:any = {
  "1":"周一",
  "2":"周二",
  "3":"周三",
  "4":"周四",
  "5":"周五",
  "6":"周六",
  "0":"周日",
}
const numtozh = (num:string)=>{
  return dict1[num];
}
const weektozh=(num:string)=>{
  return dict2[num]
}
// 需要展示的所有日期列表
const daylist = ref([])
// 年月日数据暂存
const shijian = ref<Date | null>(null)
const nian = ref<Number | null>(null)
const yue = ref<Number | null>(null)
const ri = ref<Number | null>(null)
const getnianyueri = (canshu:Date |null = null) => {
  // 置空日期列表
  daylist.value = []
  if (canshu) {
    shijian.value = new Date(canshu)
  } else {
    shijian.value = new Date();
  }
  nian.value = shijian.value.getFullYear()
  yue.value = shijian.value.getMonth() + 1
  ri.value = shijian.value.getDate()
  // 当前显示月份改变后，需要向父组件抛出，父组件可以根据月份更新日程
  emit("changemonth",{year:nian.value,month:yue.value})
  tianchong()
}
// 计算需要展示的第一个日期
const startandendday=()=>{
  const cloneNowDate = new Date(shijian.value);
  // 先获取这个月的第一天
  const firstdaytime = cloneNowDate.setDate(1)
  // 获取第一天是周几  ，修改2021年7月26日 14:42:58，周日是0不是7，我草。
  let firstdayweek = new Date(firstdaytime).getDay()
  if(firstdayweek===0){
    firstdayweek=7
  }
  // 展示时间的第一天
  return firstdaytime - (firstdayweek - 1) * 24 * 60 * 60 * 1000
}
// 向列表填充数据
const tianchong=()=>{
  const starttime = startandendday()
  console.log(starttime,"开始时间")
  for (let i=0;i<=60;i++){
    let shuju:any = {}
    const shijianchuo = starttime + i*24*60*60*1000
    const sj = new Date(shijianchuo)
    const nian1 = sj.getFullYear()
    const yue1 = sj.getMonth() +1
    const ri1 = sj.getDate()
    const week = sj.getDay()
    if(yue.value===1){
      if(yue1>yue.value && yue1 !== 12){
        if(week===1 || week ===7){break}
      }
    }else if(yue.value===12){
      if(yue1-yue.value===-11){
        if(week===1 || week ===7){break}
      }
    }else{
      if(yue1>yue.value!){
        if(week===1 || week ===7){break}
      }
    }
    shuju["timestamp"] = shijianchuo
    shuju["year"] = nian1
    shuju["month"] = yue1
    shuju["day"] = ri1
    shuju["week"] = week
    shuju["zhou"] = weektozh(week)
    daylist.value.push(shuju)
  }
}
// 日期点击事件
const clickevent=(item:any)=>{
  emit("handleclick",item)
  // 如果点击的日期不是当前月的，修改当前时间
  if(item.month !== yue.value){
    getnianyueri(item.timestamp)
  }
}
// 数字转汉字
const hanziyue = computed(()=>{
  return numtozh(yue.value)
})
// 点击上个月或者下个月
const gaimonth=(num:number)=>{
  let newmonth = yue.value + num
  // 如果大于12，转到下一年
  if(newmonth>12){
    nian.value += 1
    newmonth = 1
  }else if(newmonth < 1 ){
    nian.value -= 1
    newmonth = 12
  }
  const sj = new Date(Date.parse(nian.value+"/"+newmonth+"/"+ri.value)).getTime()
  getnianyueri(sj)
}
// 获取今天的时间
const xianzaitime = ref({})
const getnow = ()=>{
  const sj = new Date()
  xianzaitime.value["nian"] = sj.getFullYear()
  xianzaitime.value["yue"] = sj.getMonth() +1
  xianzaitime.value["ri"] = sj.getDate()
}
// 初始化区域
getnow()
getnianyueri()
</script>

<style scoped>

</style>